<template>
    <div class="app-container order_list">


        <el-card shadow="never" :body-style="{ padding: '20px' }">
            <div slot="header" class="p20">
                <i class="el-icon-s-grid mr10"></i>
                <span>数据列表</span>
                <div class="button-main">
                    <el-button type="primary"  @click="handleDownload">添加</el-button>
                </div>
            </div>
            <el-table border v-loading="loading" :data="dataSource" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" :selectable="selectHandle" />
                <el-table-column label="#" type="index"> </el-table-column>
                <el-table-column label="原因类型" align="center" prop="orderNo" width="150" />
                <el-table-column label="排序" align="center" prop="addTime" width="80" />
                <el-table-column label="是否启用" align="center" prop="nickName" />
                <el-table-column label="添加时间" align="center" prop="allTotalAmount" />
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button type="text"  @click="handleView(scope.row.id)">编辑</el-button>
                        <el-divider direction="vertical"></el-divider>
                        <el-button type="text"  @click="handleDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page.sync="queryParams.pageNum"
                v-model:limit.sync="queryParams.pageSize" @pagination="getList" />
        </el-card>
        <AddForm ref="modelForm" @refresh="getList" />
    </div>
</template>
  
<script>
import AddForm from './modules/addForm.vue';
import listMixin from '@/mixins/listMixin';
export default {
    name: "reason",
    components: {
    AddForm
},
    mixins: [listMixin],
    dicts: ["order_status","order_source"],
    data() {
        return {
            queryParams: {
                orderNo: '',
                pageNum: 1,
                pageSize: 10
            },
            showStatus:true,
            currentIndex: 0,
            urls: {
                list: '/goods/orders/list',
                delete: '/goods/orders',
            },
        };
    },
    methods: {
        handleView(row) {
            window.open(`/goods/order/view/${row.id}`);
        },
        itemClick(item, index) {
            this.currentIndex = index;
        },
        printDeliver(id) {
            this.$refs.printDeliverForm.show(id);
        },
        printShippingOrder() {
            this.$refs.printShipping.show();
        },
        handleDownload() {
            this.$refs.downloadAllocation.show();
        },
        handleDeliver() {
            this.$refs.batchDeliverForm.show();
        },
        showSearchForm() {
            this.$refs.searchForm.show();
        }

    },
};
</script>
<style type="text/css" lang="scss" scoped>
.app-container {
    background-color: #F9F9F9;
    color: #666;
    min-height: calc(100vh - 84px);
}

.status_main {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.status_item {
    padding: 8px 16px;
    cursor: pointer;
    border: 1px solid #E4E4E4;
    margin-right: 10px;
    color: #666;
    background-color: #fff;
}

.status_item.active {
    background-color: #409eff;
    color: #fff;
}

.num {
    color: #f56c6c;
}

.active .num {
    color: #fff;
}

.button-main {
    float: right;
    margin-top: -10px;
}

.button_item:not(:last-child) {
    border-right: none;
}

.button_item {
    padding: 8px 16px;
    cursor: pointer;
    border: 1px solid #E4E4E4;
    color: #409eff;
    background-color: #fff;
    display: inline-block;
}
.button_item:hover {
    background-color: #409eff;
    color: #fff;
    cursor: pointer;
}
.p20{
    padding: 6px 0;
}
.hide_status{
    float: right;
    margin-right: 10px;
    color: #409eff;
    cursor: pointer;
    i{
        margin-right: 4px;
        color: #409eff;
    }
}
</style>

<style type="text/css">
.order_list .el-card__header {
    background-color: #f5f7fa;
}
</style>